﻿@page "/tree-grid/remote-data-with-virtualization"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@*Hidden:Lines*@
@using ej2_blazor_virtualdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the Tree Grid component with the vertical scrollbar to view the exceeded tree grid content in remote data binding.</p>
</SampleDescription>
<ActionDescription>
    <p>
        Virtualization helps you to improve the Tree Grid performance while loading a large set of remote data. The Tree Grid UI virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource.
        To enable row virtualization, set the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableVirtualization'>EnableVirtualization</a></code> property as true.
    </p>
    <p>In this demo, Tree Grid is rendered with row virtualization. Tree Grid is bound with 10,000 rows.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid @ref="TreeGrid" TValue="SelfReferenceData" IdMapping="taskID" EnableVirtualization="true" ParentIdMapping="parentItem"
                        Height="315" TreeColumnIndex="1" HasChildMapping="isParent">
                <SfDataManager Url="/api/TreeGrid" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
                <TreeGridColumns>
                    <TreeGridColumn Field="taskID" HeaderText="Task ID" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="taskName" HeaderText="Task Name" Width="135"></TreeGridColumn>
                    <TreeGridColumn Field="startDate" HeaderText="Start Date" Format="d" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="duration" HeaderText="Duration" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="priority" HeaderText="Priority" Width="105"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
            @code{
                SfTreeGrid<SelfReferenceData> TreeGrid { get; set; }
            }
        </div>
    </div>
</div>
